<template>
    <div class="details-Main">
      <div class="details-Main-search">
        <span class="details-Main-search-span">服务器名称</span>
        <Input v-model="value" placeholder="输入服务器名称" style="width: 190px"  class="details-Main-search-input"/>
        <span class="details-Main-search-span">查询时间</span>
        <DatePicker :value="startTime" format="yyyy-MM-dd-HH-mm-ss" type="date" placeholder="请输入起始时间" style="width: 190px;"></DatePicker>
        <span class="details-Main-search-span" style="margin-left: 10px">—</span>
        <DatePicker :value="endTime" format="yyyy-MM-dd-HH-mm-ss" type="date" placeholder="请输入起始时间" style="width: 190px;"></DatePicker>
        <div class="details-searchBtn">查询</div>
        <div class="details-goBackBtn" @click="goBack()">返回</div>
      </div>
      <div class="details-Main-echarts">
        <div class="details-Main-echarts-CPU">
          <span class="details-Main-echarts-CPU-span">
            <img src="../../../static/images/divider.png" alt="" style="margin-right: 10px">CPU使用率（%）
          </span>
          <div id="echartsCPU"></div>
        </div>
        <div class="details-Main-echarts-CPU">
          <span class="details-Main-echarts-CPU-span">
            <img src="../../../static/images/divider.png" alt="" style="margin-right: 10px">内存使用量（MB）
          </span>
          <div id="echartsMemory"></div>
        </div>
        <div class="details-Main-echarts-CPU" style="width: 49%;float: left">
          <span class="details-Main-echarts-CPU-span">
            <img src="../../../static/images/divider.png" alt="" style="margin-right: 10px">磁盘IO使用率（%）
          </span>
          <div id="diskIO"></div>
        </div>
        <div class="details-Main-echarts-CPU" style="width: 49%;float: right">
          <span class="details-Main-echarts-CPU-span">
            <img src="../../../static/images/divider.png" alt="" style="margin-right: 10px">网络IO（kb）
          </span>
          <div id="networkIO"></div>
        </div>
      </div>
    </div>
</template>

<script>
  import echarts from 'echarts'
    export default {
      data () {
          return {
            startTime: '',
            endTime: '',
            value: ''
          }
      },
      methods: {
        goBack () {
          this.$router.go(-1)
        },
        CPU () {
          var myChart = echarts.init(document.getElementById('echartsCPU'))
          var option = {
            tooltip: {
              trigger: 'axis',
              // trigger: 'item',
              position: 'top',
              // backgroundColor: '#72c4ea',
              textStyle: {
                align: 'center'
              }
              // formatter: '{c0}'
            },
            legend: {
              data: ['当前时间', '历史同期'],
              right: '45px'
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              axisLabel: {
                // interval: 0,
                textStyle: {
                  color: '#848484'
                }
              },
              axisLine: {
                lineStyle: {
                  color: '#e3e7ff',
                  type: 'solid'
                }
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: ['#f3f3f3'],
                  width: 1,
                  type: 'solid'
                }
              },
              type: 'category',
              boundaryGap: false,
              data: ['1/22', '1/23', '1/24', '1/25', '1/26', '1/27', '1/28', '1/22', '1/23', '1/24', '1/25', '1/26', '1/27', '1/28']
            },
            yAxis: {
              axisLabel: {
                // interval: 0,
                textStyle: {
                  color: '#848484'
                }
              },
              axisLine: {
                lineStyle: {
                  color: '#fff',
                  type: 'solid'
                }
              },
              type: 'value',
              splitLine: {
                show: true,
                lineStyle: {
                  color: ['#f3f3f3'],
                  width: 1,
                  type: 'dashed'
                }
              }
            },
            series: [
              {
                name: '当前时间',
                type: 'line',
                stack: '总量',
                data: [10, 20, 20, 34, 19, 23, 10, 30, 30, 20, 34, 19, 23, 10],
                itemStyle: {
                  normal: {
                    lineStyle: {
                      color: '#72c4ea',
                      width: 2
                    }
                  }
                },
                areaStyle: {
                  color: 'rgba(114,196,234,0.2)'
                }
              },
              {
                name: '历史同期',
                type: 'line',
                stack: '总量',
                data: [10, 20, 20, 34, 19, 23, 10, 30, 30, 20, 34, 19, 23, 10],
                itemStyle: {
                  normal: {
                    lineStyle: {
                      color: '#ef8200',
                      width: 2
                    }
                  }
                },
                areaStyle: {
                  color: 'rgba(239,130,0,0.2)'
                }
              }
            ]
          }
          myChart.setOption(option)
        },
        Memory () {
          var myChart = echarts.init(document.getElementById('echartsMemory'))
          var option = {
            tooltip: {
              trigger: 'axis'
            //   trigger: 'item',
            //   position: 'top',
            //   backgroundColor: '#72c4ea',
            //   textStyle: {
            //     align: 'center'
            //   },
            //   formatter: '{c0}'
            },
            legend: {
              data: ['当前时间', '历史同期'],
              right: '45px'
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              // 刻度
              axisTick: {
                show: false
              },
              axisLabel: {
                // interval: 0,
                textStyle: {
                  color: '#848484'
                }
              },
              // 坐标轴线
              axisLine: {
                lineStyle: {
                  color: '#e5f3f7',
                  type: 'solid'
                }
              },
              // 分隔线
              splitLine: {
                show: true,
                lineStyle: {
                  color: ['#e5f3f7'],
                  width: 1,
                  type: 'solid'
                }
              },
              type: 'category',
              boundaryGap: false,
              data: ['1/22', '1/23', '1/24', '1/25', '1/26', '1/27', '1/28', '1/22', '1/23', '1/24', '1/25', '1/26', '1/27', '1/28']
            },
            yAxis: {
              axisLabel: {
                // interval: 0,
                textStyle: {
                  color: '#848484'
                }
              },
              axisLine: {
                lineStyle: {
                  color: '#fff',
                  type: 'solid'
                }
              },
              type: 'value',
              splitLine: {
                show: true,
                lineStyle: {
                  color: ['#e5f3f7'],
                  width: 1,
                  type: 'solid'
                }
              }
            },
            series: [
              {
                symbol: 'none',
                name: '当前时间',
                type: 'line',
                stack: '总量1',
                data: [10, 20, 20, 34, 19, 23, 10, 30, 30, 20, 34, 19, 23, 10],
                itemStyle: {
                  normal: {
                    lineStyle: {
                      color: '#72c4ea',
                      width: 3
                    }
                  }
                },
                areaStyle: {
                  color: 'rgba(114,196,234,0.1)'
                }
              },
              {
                symbol: 'none',
                name: '历史同期',
                type: 'line',
                stack: '总量2',
                data: [30, 30, 15, 20, 22, 23, 12, 10, 20, 29, 31, 40, 32, 30],
                itemStyle: {
                  normal: {
                    lineStyle: {
                      color: '#ef8200',
                      width: 3
                    }
                  }
                },
                areaStyle: {
                  color: 'rgba(239,130,0,0.1)'
                }
              }
            ]
          }
          myChart.setOption(option)
        },
        diskIO () {
          var myChart = echarts.init(document.getElementById('diskIO'))
          var option = {
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            tooltip: {
              formatter: '平均值：{c0}',
              trigger: 'axis',
              // 提示框的竖轴线
              axisPointer: {
                type: 'line',
                lineStyle: {
                  color: '#f5434c',
                  width: 2,
                  type: 'solid'
                },
                shadowStyle: {
                  width: 'auto',
                  color: 'rgba(150,150,150,0.3)'
                }
              },
              backgroundColor: 'rgba(255,255,255,0.4)',
              borderColor: 'gray',
              textStyle: {
                color: '#f5434c',
                fontWeight: 'bold'
              }
            },
            xAxis: {
              // 刻度
              axisTick: {
                show: false
              },
              // 坐标轴线
              axisLine: {
                lineStyle: {
                  color: '#efefef',
                  type: 'solid'
                }
              },
              axisLabel: {
                // interval: 0,
                textStyle: {
                  color: '#848484'
                }
              },
              type: 'category',
              data: ['1/22', '1/23', '1/24', '1/25', '1/26', '1/27', '1/28', '1/22', '1/23', '1/24', '1/25', '1/26', '1/27', '1/28', '1/23', '1/24', '1/25', '1/26', '1/27', '1/22', '1/23', '1/24', '1/25', '1/26', '1/27', '1/28', '1/22', '1/23', '1/24', '1/25', '1/26', '1/27', '1/28', '1/23', '1/24', '1/25', '1/26', '1/27', '1/22', '1/23', '1/24', '1/25', '1/26', '1/27', '1/28', '1/22', '1/23', '1/24']
            },
            yAxis: {
              type: 'value',
              // 刻度
              axisTick: {
                show: false
              },
              // 坐标轴线
              axisLine: {
                lineStyle: {
                  color: '#efefef',
                  type: 'solid'
                }
              },
              // 坐标轴标签
              axisLabel: {
                // interval: 0,
                textStyle: {
                  color: '#848484'
                }
              },
              // 分隔线
              splitLine: {
                show: true,
                lineStyle: {
                  color: ['#efefef'],
                  width: 1,
                  type: 'solid'
                }
              }
            },
            series: [
              {
                data: [10, 20, 20, 34, 19, 23, 10, 30, 30, 20, 34, 19, 23, 10, 34, 19, 23, 10, 30, 10, 20, 20, 34, 19, 23, 10, 30, 30, 20, 34, 19, 23, 10, 34, 19, 23, 10, 30, 10, 20, 20, 34, 19, 23, 10, 30, 30, 20],
                type: 'bar',
                barWidth: 2,
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                      offset: 0,
                      color: '#ef8100'
                    }, {
                      offset: 1,
                      color: '#ea541f'
                    }
                    ], false)
                  }
                },
                // 基准线
                markLine: {
                  data: [
                    {type: 'average', name: '平均值'}
                  ],
                  lineStyle: {
                    color: '#d00210'
                  }
                }
              }
            ]
          }
          myChart.setOption(option)
        },
        networkIO () {
          var myChart = echarts.init(document.getElementById('networkIO'))
          var option = {
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            tooltip: {
              formatter: '平均值：{c0}',
              trigger: 'axis',
              // 提示框的竖轴线
              axisPointer: {
                type: 'line',
                lineStyle: {
                  color: '#f5434c',
                  width: 2,
                  type: 'solid'
                },
                shadowStyle: {
                  width: 'auto',
                  color: 'rgba(150,150,150,0.3)'
                }
              },
              backgroundColor: 'rgba(255,255,255,0.4)',
              borderColor: 'gray',
              textStyle: {
                color: '#f5434c',
                fontWeight: 'bold'
              }
            },
            xAxis: {
              // 刻度
              axisTick: {
                show: false
              },
              // 坐标轴线
              axisLine: {
                lineStyle: {
                  color: '#efefef',
                  type: 'solid'
                }
              },
              axisLabel: {
                // interval: 0,
                textStyle: {
                  color: '#848484'
                }
              },
              type: 'category',
              data: ['1/22', '1/23', '1/24', '1/25', '1/26', '1/27', '1/28', '1/22', '1/23', '1/24', '1/25', '1/26', '1/27', '1/28', '1/23', '1/24', '1/25', '1/26', '1/27', '1/22', '1/23', '1/24', '1/25', '1/26', '1/27', '1/28', '1/22', '1/23', '1/24', '1/25', '1/26', '1/27', '1/28', '1/23', '1/24', '1/25', '1/26', '1/27', '1/22', '1/23', '1/24', '1/25', '1/26', '1/27', '1/28', '1/22', '1/23', '1/24']
            },
            yAxis: {
              type: 'value',
              // 刻度
              axisTick: {
                show: false
              },
              // 坐标轴线
              axisLine: {
                lineStyle: {
                  color: '#efefef',
                  type: 'solid'
                }
              },
              // 坐标轴标签
              axisLabel: {
                // interval: 0,
                textStyle: {
                  color: '#848484'
                }
              },
              // 分隔线
              splitLine: {
                show: true,
                lineStyle: {
                  color: ['#efefef'],
                  width: 1,
                  type: 'solid'
                }
              }
            },
            series: [
              {
                data: [10, 20, 20, 34, 19, 23, 10, 30, 30, 20, 34, 19, 23, 10, 34, 19, 23, 10, 30, 10, 20, 20, 34, 19, 23, 10, 30, 30, 20, 34, 19, 23, 10, 34, 19, 23, 10, 30, 10, 20, 20, 34, 19, 23, 10, 30, 30, 20],
                type: 'bar',
                barWidth: 2,
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                      offset: 0,
                      color: '#ef8100'
                    }, {
                      offset: 1,
                      color: '#d00210'
                    }
                    ], false)
                  }
                },
                // 基准线
                markLine: {
                  data: [
                    {type: 'average', name: '平均值'}
                  ],
                  lineStyle: {
                    color: '#d00210'
                  }
                }
              }
            ]
          }
          myChart.setOption(option)
        }
      },
      mounted () {
        this.CPU()
        this.Memory()
        this.diskIO()
        this.networkIO()
      }
    }
</script>

<style lang="less">
  @color: #d00210;
.details-Main{
  width: 100%;
  height: auto;
  // 搜索
  .details-Main-search{
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    padding: 20px 120px;
    .details-Main-search-span{
      font-size: 14px;
      margin-right: 10px;
    }
    .details-Main-search-input{
      margin-right: 50px;
    }
    .details-searchBtn{
      width: 116px;
      height: 30px;
      background: @color;
      color: #fff;
      line-height: 30px;
      text-align: center;
      display: inline-block;
      margin-left: 60px;
      cursor: pointer;
    }
    .details-goBackBtn{
      width: 116px;
      height: 30px;
      border: 1px solid @color;
      line-height: 30px;
      text-align: center;
      display: inline-block;
      margin-left: 60px;
      cursor: pointer;
    }
  }
  // 图表
  .details-Main-echarts{
    width: 100%;
    height: auto;
    padding: 0 120px;
    .details-Main-echarts-CPU{
      width: 100%;
      height: 400px;
      margin-bottom: 40px;
      .details-Main-echarts-CPU-span{
        display: block;
        height: 60px;
        line-height: 60px;
        background: #fae5e7;
        padding-left: 30px;
      }
      #echartsCPU{
        width: 100%;
        height: 340px;
        padding: 40px 80px;
        background: #fff;
      }
      #echartsMemory{
        width: 100%;
        height: 340px;
        padding: 40px 80px;
        background: #fff;
      }
      #diskIO{
        width: 100%;
        height: 340px;
        padding: 20px 50px;
        background: #fff;
      }
      #networkIO{
        width: 100%;
        height: 340px;
        padding: 20px 50px;
        background: #fff;
      }
    }
  }
}
</style>
